<template>
  <div class="page-container">
    <!-- 顶部横幅 -->
    <div class="header-banner">
      <h2>我的钱包</h2>
      <p>管理您的账户余额，享受便捷支付体验！</p>
    </div>
    <div class="wallet-content">
      <!-- 卡片网格 -->
      <div class="card-grid">
        <!-- 钱包信息卡片 -->
        <el-card class="wallet-card" shadow="hover">
          <h3 class="section-title">账户余额</h3>
          <el-descriptions :column="1" border class="wallet-descriptions">
            <el-descriptions-item label="当前余额">
              <span class="balance">¥{{ wallet.toFixed(2) }}</span>
            </el-descriptions-item>
          </el-descriptions>
          <div class="recharge-action">
            <el-button type="primary" class="recharge-button" @click="handleRecharge">
              <i class="el-icon-plus"></i> 充值
            </el-button>
          </div>
        </el-card>
        <!-- 充值提示卡片 -->
        <el-card class="tips-card" shadow="hover">
          <h3 class="section-title">充值提示</h3>
          <ul class="tips-list">
            <li>建议选择常用金额（如 ¥100、¥500）</li>
            <li>支持多种支付方式：支付宝、微信等</li>
            <li>充值金额实时到账，无手续费</li>
            <li>余额可用于订单支付和会员续费</li>
          </ul>
        </el-card>
      </div>
      <!-- 常见问题卡片 -->
      <el-card class="faq-card" shadow="hover">
        <h3 class="section-title">常见问题</h3>
        <el-collapse accordion>
          <el-collapse-item title="充值需要多长时间到账？" name="1">
            <p>充值通常实时到账，特殊情况可能延迟5-10分钟。</p>
          </el-collapse-item>
          <el-collapse-item title="余额可以退款吗？" name="2">
            <p>余额不可直接退款，但可用于平台内消费。</p>
          </el-collapse-item>
          <el-collapse-item title="充值失败了怎么办？" name="3">
            <p>如遇充值失败，请检查网络连接、支付账户状态。如仍有问题，请联系客服。</p>
          </el-collapse-item>
        </el-collapse>
      </el-card>
    </div>
  </div>
  <el-dialog v-model="showDlg" title="余额充值" width="400px" @closed="rechargeAmount=''">
  <el-input
    v-model="rechargeAmount"
    placeholder="请输入充值金额（元）"
    type="number"
    min="0"
    autofocus
  />
  <template #footer>
    <el-button @click="showDlg=false">取消</el-button>
    <el-button type="primary" @click="submitRecharge">立即充值</el-button>
  </template>
</el-dialog>

</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { getWalletService } from '@/api/user'
import { useUserInfoStore } from '../../stores/userInfo'
import { rechargeWalletService } from '@/api/pay'
import { useRouter } from 'vue-router'


const userInfoStore = useUserInfoStore()
const wallet = ref(0)

const router = useRouter()   

const fetchWallet = async () => {
  try {
    const res = await getWalletService(userInfoStore.userInfo.id)
    console.log(res)
    wallet.value = res.data
  } catch (error) {
    ElMessage.error('获取钱包信息失败')
  }
}

const showDlg = ref(false)
const rechargeAmount = ref('')

const handleRecharge = () => {
  rechargeAmount.value = ''
  showDlg.value = true
}

const submitRecharge = async () => {
  const amt = Number(rechargeAmount.value)
  if (!amt || amt <= 0) {
    ElMessage.warning('请输入有效金额')
    return
  }
  try {
    const { data: htmlForm } = await rechargeWalletService(amt)
    // 用一个新窗口承载后端返回的支付表单
    const payWin = window.open('', '_blank')
    payWin.document.write(htmlForm)
    payWin.document.close()
    showDlg.value = false
  } catch (e) {
    ElMessage.error('创建充值订单失败')
  }
}

fetchWallet()
</script>

<style lang="scss" scoped>
.page-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: auto;
  padding: 12px;
  box-sizing: border-box;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e7ed 100%);
}

.header-banner {
  text-align: center;
  padding: 12px 16px;
  background: linear-gradient(90deg, #409eff 50%, #79bbff 100%);
  color: #fff;
  border-radius: 8px;
  margin-bottom: 12px;

  h2 {
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 6px;
  }

  p {
    font-size: 13px;
    margin: 0;
    opacity: 0.9;
  }
}

.wallet-content {
  flex: 1;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  width: 100%;
  height: fit-content;

  @media (max-width: 768px) {
    grid-template-columns: 1fr;
  }
}

.section-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-color);
  margin-bottom: 10px;
  text-align: center;
}

.wallet-card {
  border-radius: 8px;
  transition: transform 0.3s ease;
  min-height: 300px;
  display: flex;
  flex-direction: column;

  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
  }

  .wallet-descriptions {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;

    .balance {
      color: var(--el-color-primary);
      font-size: 22px;
      font-weight: 600;
    }
  }

  .recharge-action {
    text-align: center;
    margin-top: 16px;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .recharge-button {
    width: 100%;
    max-width: 400px;
    font-size: 13px;
    padding: 10px;
    border-radius: 6px;
    transition: background-color 0.3s ease;

    &:hover {
      background-color: var(--el-color-primary-dark-2);
    }
  }
}

.tips-card {
  border-radius: 8px;
  transition: transform 0.3s ease;
  min-height: 300px;
  display: flex;
  flex-direction: column;
      .section-title {
      font-size: 22px;  
      font-weight: 600;
      text-align: center;
      margin-bottom: 12px;
      color: var(--el-color-primary); 
    }

  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
  }

  .tips-list {
    list-style: none;
    padding: 0;
    margin: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;

    li {
      font-size: 18px;
      color: var(--text-color);
      margin-bottom: 10px;
      padding-left: 20px;
      position: relative;
      line-height: 2.0; 

      &:before {
        content: '✔';
        position: absolute;
        left: 0;
        color: var(--el-color-primary);
        font-weight: bold;
      }
    }
  }
}

.faq-card {
  border-radius: 8px;
  transition: transform 0.3s ease;
  width: 100%;
  height: fit-content;

  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
  }

  .el-collapse {
    border: none;

    :deep(.el-collapse-item__header) {
      font-size: 13px;
      padding: 8px 12px;
      background: #f5f7fa;
      border-radius: 6px;
      margin-bottom: 6px;
    }

    :deep(.el-collapse-item__content) {
      font-size: 13px;
      padding: 8px 12px;
    }
  }
}
</style>